<template>
  <div class="ma-content-block p-4">
    <ma-crud :options="crud" :columns="columns" ref="crudRef"  @selection-change="selectChange">
      <template #tableAfterButtons>
        <a-button
            @click="batchAudit"
            type="outline"
            status="success"
        ><template #icon><IconExperiment /></template>批量审核</a-button>
      </template>

      <template #info="{ record }">
        <div class="flex flex-col items-center">
          <text>{{ record.nickname || '微信用户' }}</text>
        </div>
      </template>

      <template #amt="{ record }">
        <text class="text-red-500">{{ record.amt}}</text>
      </template>

      <template #operationAfterExtend="{ record }">
        <a-link @click="audit(record)" v-if="record.status == 0"><icon-arrow-up /> 审核</a-link>
      </template>
    </ma-crud>

    <a-modal
        v-model:visible="visible"
        @ok="doApplyAudit"
        @cancel="approveClose"
        okText="审核" cancelText="关闭"
        unmountOnClose
        draggable
    >
      <template #title>
        title
      </template>
      <div>
        <a-form :model="approveForm">
          <a-form-item field="remark" label="审核备注">
            <a-input v-model="approveForm.remark" placeholder="拒绝时请填写拒绝原因"/>
          </a-form-item>
          <a-form-item field="status" label="审核结果">
            <a-radio-group v-model="approveForm.status" :options="[{ label: '通过', value: 2 },{ label: '拒绝', value: -2 }]" />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>

    <a-modal
        v-model:visible="retVisible"
        unmountOnClose
        draggable
    >
      <div>
       {{ retMsg }}
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted} from 'vue'

import api from '@/api/prm/widthdrawal.js'
import { Message } from '@arco-design/web-vue'


const crudRef = ref()
//选中项
const selecteds = ref([])
//设置选中项
const selectChange = (val) => selecteds.value = val
//审核弹窗
const visible = ref(false);
const retVisible = ref(false);
const retMsg = ref('');
//审核表单
const approveForm = ref({applyId:0,remark:'',status:2});

const audit = async (record) => {
  approveForm.value.applyId = record.id
  visible.value = true;
}
const batchAudit = async () => {
  console.log(selecteds.value);

  if (selecteds.value.length === 0) {
    Message.error('至少要选择一条数据')
    return
  }

  approveForm.value.applyId = selecteds.value
  visible.value = true;
}

const approveClose = () => {
  visible.value = false;
}
//执行审核
const doApplyAudit = async () => {

  let response
  response = await api.applyAudit(approveForm.value)

  retVisible.value = true;
  retMsg.value = response.message;
  // response.success && Message.success(response.message)

  crudRef.value.refresh()
}

//表格
const crud = reactive({
  api: api.list,
  showIndex: false,
  // pageLayout: 'fixed',
  showTools:false,
  // tablePagination:true,
  rowSelection: {showCheckedAll: true},
  operationColumn: true,
  operationColumnWidth: 100,
  searchColNumber:3,
  add: {show: false},
  edit: {show: false},
  delete: {show: false},
  formOption: {viewType: 'drawer', width: 800},
})

const status = [
  {value: 0, label: '待审核'},
  {value: 1, label: '提现处理中'},
  {value: 2, label: '提现成功'},
  {value: -2, label: '审核拒绝'},
  {value: -1, label: '提现失败'},
]
const columns = reactive([
  {title: 'ID', dataIndex: 'id', addDisplay: false, editDisplay: false, width: 50, hide: true},
  {title: '昵称', dataIndex: 'info', formType: 'input', search: false, width: 80,},
  {title: '会员等级', dataIndex: 'level', formType: 'input', search: false, width: 80,},
  {title: '总余额', dataIndex: 'total_amt', formType: 'input', search: false, width: 80,},
  {title: '可用余额', dataIndex: 'useful_amt', formType: 'input', search: false, width: 80,},
  {title: '提现通道', dataIndex: 'withdrawal_type', formType: 'select', dict: {data: [{label: '微信', value: 'wxpay'}, {label: '支付宝', value: 'alipay'}], translation: true}, search: true, width: 80,},
  {title: '提现金额', dataIndex: 'amt', formType: 'input', search: false, width: 80,},
  {title: '提现账户', dataIndex: 'alipay_account', formType: 'input', search: false, width: 80,},
  {title: '审核备注', dataIndex: 'remark', formType: 'input', search: false, width: 80,},
  {title: '提现备注', dataIndex: 'sub_msg', formType: 'input', search: false, width: 80,},
  {title: '状态', dataIndex: 'status', formType: 'select', dict: {data: status, translation: true}, search: true, width: 80,},
  {
    title: '申请时间', dataIndex: 'created_at', addDisplay: false, editDisplay: false,
    search: true, formType: 'range', width: 180
  }])

</script>

<script>
export default {name: 'prm:member_withdrawal'}
</script>

<style scoped>

</style>
